<template>
  <div class="my-detail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, i) in imgList" :key="i">
        <van-image :src="item"></van-image>
      </van-swipe-item>
    </van-swipe>

    <van-cell style="height: 70px" class="price" title="预计到手￥" :value="product.price"/>
    <van-tag style="font-size: 16px;margin-right: 15px" type="danger">200减20</van-tag>
    <van-tag style="font-size: 16px;margin-right: 15px" type="danger">1000减50</van-tag>
    <van-cell  :value="product.title"/>
    <van-cell style="" :value="product.subtitle"/>
    <van-cell style="" :value="product.detail"/>

    <!-- 优惠券单元格 -->
    <van-coupon-cell
        style="font-size: 20px;margin-bottom: 15px;margin-top: 15px"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="coupon = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
        v-model="coupon"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px; font-weight: bold"
    >
      <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
      />
    </van-popup>


    <!-- 商品购买区域 -->
    <van-goods-action style="z-index: 999">
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24"/>
      <van-goods-action-icon icon="cart-o" text="购物车"/>
      <van-goods-action-icon :icon=icon text="已收藏" color="#ff5000"/>
      <van-goods-action-button type="warning" text="加入购物车"
                               @click="onClickAddShopcart"/>
      <van-goods-action-button type="danger" text="立即购买"/>
    </van-goods-action>


  </div>
</template>
<script>
import dayjs from 'dayjs'; //导入日期格式化模块


// 导入封装的接口
import {getProductDetailByIdAPI} from '@/api/product.js';
import {addCartAPI} from '@/api/cart.js';
import {getProductImgAPI} from "../../api/product";

const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
}

export default {
  name: 'ProductDetail',
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      icon: "star-o",
      product: {},
      imgList: [],
      coupon: [false],
      count: 0
    };
  },
  created() {
    this.coupon = true
    const id = this.$route.query.id;
    //根据id去后端获取对应商品的详细数据
    //使用封装后的接口
    getProductDetailByIdAPI(id).then(result => {

      this.product = result.data;
      console.log(this.product);
      this.product.shelf_time = dayjs(this.product.shelf_time).format('YYYY-MM-DD HH:mm:ss');
      getProductImgAPI(this.product.id).then(result => {
        let img = result.data;
        console.log(img)
        img.forEach(item => {
          this.imgList.push(item);
        });
      })
      //上架时间格式化

    });
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },

    onBack() {
      this.$router.back();
    },
    handleClick() {
      this.$toast.text('很抱歉，没抢到~~');
    },
    //处理添加购物车
    onClickAddShopcart() {
      let params = {
        product_id: this.product.id,
        count: 1
      };
      //2.使用封装后的接口,注意：接口有参数
      addCartAPI(params)
          .then(result => {
            this.$toast(result.msg);
          })
          .catch(() => {
          });
    }
  },
}
;
</script>

<style lang="less" scoped>
.my-detail {
  background-color: rgba(200, 201, 204, 0.2);
}

.count-buy {
  display: flex;
  flex-direction: row;
  margin: 10px 0px;
  justify-content: space-between;
}

.van-cell__value--alone {
  color: black;
  line-height: 40px;
  font-size: 18px;
  font-weight: 550;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.price {
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: red;
  font-weight: bold;
  .van-cell__value{
    font-size: 35px;
    text-align: left;
    color: red;
  }
}
</style>
